<script setup>
import { addInfo, isAddGroup, middlePage, rightPage } from '../../stores/page'
import { getFriendHeadShot } from '../../stores/getFriend'
import { useChatRecordingStore } from '@/stores/chatRecording';
import { setFriendInfo } from '../../stores/friend';
import { ref } from 'vue'
import { ElDrawer, ElMessageBox, ElMessage } from 'element-plus'
import { userId } from '../../stores/user'
import axios from 'axios'
import { allGroupMembers } from '@/stores/group';

let timer

const dialog = ref(false)
const loading = ref(false)

const cancelForm = () => {
    loading.value = true
    setTimeout(() => {
        loading.value = false
        dialog.value = false
    }, 400)
}

const handleClose = (done) => {
    if (loading.value) {
        return
    }
    ElMessageBox.confirm('是否退出申请', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    })
        .then(() => {
            loading.value = true
            timer = setTimeout(() => {
                done()
                // 动画关闭需要一定的时间
                setTimeout(() => {
                    loading.value = false
                }, 400)
            },400)
        })
        .catch((error) => {
            console.log(error)
        })
}

const onClick = () => {
    loading.value = false
    dialog.value = false
    clearTimeout(timer)
    //发送申请
    axios({
        method : 'post',
        url : 'https://47.120.69.214:8787/groupApply/add',
        data:{
            "userId" : userId.value,
            "groupId" : addInfo.value.id
        },
        headers : {
            "Content-Type" : "application/json"
        }
    })
    .then(response => {
        ElMessage.success('发送成功')
    })
    .catch(error => {
        console.log(error)
    })
}
//获取聊天记录与好友信息
const chatRecordingStore = useChatRecordingStore();
//群聊申请
const input = ref('')

function toggleSendInterface(item) {
    middlePage.value = 1
    //将聊天群聊的信息储存到会话储存中
    sessionStorage.setItem('friend', JSON.stringify(item));
    //更改会话的群聊信息
    setFriendInfo()
    //获取聊天记录
    chatRecordingStore.getGroupChatRecordingList();
    rightPage.value = 1
}

function addFriend() {
    dialog.value = true
}

</script>

<template>

    <el-card
        style="width: 65vw; height : 99vh; position : fixed; top : 0; left : 34.5%; background-color :rgb(239, 236, 229);">
        <template #header>
            <div class="card-header">
                <el-avatar shape="square" :size="90" :src="getFriendHeadShot(addInfo.headShotUrl)"
                    style="margin-left:-85%" />
            </div>
        </template>
        <div class="card-body" style="margin-bottom:0%">
            <el-card style="width: 60vw; text-align:left; margin-bottom:1%; font-size:20px" shadow="always">群昵称: {{
                addInfo.name
                }}</el-card>
                <el-card style="width: 60vw; text-align:left; margin-bottom:1%; font-size:20px" shadow="always">群介绍: {{
                addInfo.introduce
                }}</el-card>
                <div style="font-size:30px">群成员</div>
                <el-scrollbar style="height:40vh; width:35vw; left:20%">
                    <div v-for="item in allGroupMembers" :key="item" class="scrollbar-demo-item" >
                        <el-avatar shape="square" :size="50" :src="getFriendHeadShot(item.headShotUrl)" style="margin-left:35%;"/>
                        <div style="font-size:20px; color:black;margin-left:10%; ">{{ item.name }}</div>
                    </div>
                </el-scrollbar>
        </div>
        <template #footer>
            <div v-if="isAddGroup === true">
                <el-button type="success" @click="toggleSendInterface(addInfo)"
                    style="width:20vw;height:8vh;font-size:20px">发送信息</el-button>
            </div>
            <div v-else>
                <el-button type="success" @click="addFriend()"
                    style="width:20vw;height:8vh; font-size:20px">添加群聊</el-button>
            </div>
        </template>
    </el-card>
    <el-drawer v-model="dialog" title="群聊申请" :before-close="handleClose" direction="ltr" class="demo-drawer">
        <el-input v-model="input" maxlength="50" style="width: 25vw;" placeholder="群聊申请" show-word-limit :rows="5"
            type="textarea" />
        <div style="margin: 10% 0"></div>
        <el-button type="primary" @click="onClick">发送申请</el-button>
        <el-button :loading="loading" @click="cancelForm" style="margin-left:15%;">
            {{ loading ? '退出申请 ...' : '退出申请' }}
        </el-button>
    </el-drawer>

</template>

<style scoped>
.scrollbar-demo-item {
  display: flex;
  align-items: center;
  justify-content: left;
  height: 50px;
  margin: 10px;
  text-align: center;
  border-radius: 4px;
  background-color:white;
}
</style>